<template>
	<view class="wrap-item flex just-between" v-if="item">
		<view class="title-bg f-30 flex">
			<view class="must" v-if="item.require">*</view>

			<view class="flex align-base">
				<view class="title">{{ item.title }}</view>

				<view class="desc f-24" v-if="item.desc && item.desc !== ''">{{ item.desc }}</view>
			</view>
		</view>

		<view class="photo-item" @click="onChooseImage">
			<image class="photo-img" v-if="value !== ''" :src="$getImageURL(value)" />

			<image class="photo-img" v-else :src="$staticImagePath('common/upload.png')" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
		},
		methods: {
			/**
			 * 选择图片
			 */
			onChooseImage() {
				this.$filters.onChooseImage(1, (list) => {
					this.onUploadImage(list[0]);
				});
			},
			/**
			 * 上传图片
			 */
			onUploadImage(file) {
				this.$commonNetwork.onUploadFile(file, (res) => {
					this.$emit("input", res.url);
				});
			},
		},
	};
</script>

<style scoped>
	@import "@/css/publish.css";

	.photo-item {
		margin-left: 0rpx;
		margin-top: 0rpx;
		width: 180rpx;
		height: 180rpx;
	}
</style>
